// 1. 渲染文章列表  调接口  拿到数据
const queryInfo = {
    pagenum: 1, // 当前页码
    pagesize: 2, // 每页显示的条数
    cate_id: '', // 分类id
    state: '' // 文章发布状态
}
let total = 0 // 总条数 后期在分页的位置渲染
// 渲染文章列表
async function getList() {
    $('tbody').empty()
    const res = await reqGetArticleList(queryInfo)
    console.log(res) // 文章列表数组数据
    total = res.data.total
    res.data.data.forEach(item => {
        //   创建tr 和 td 追加 tbody
        var theTr = `<tr>
                    <td>${item.title}</td>
                    <td>${item.cate_name}</td>
                    <td>${moment(item.pub_date).format('YYYY-MM-DD HH:mm:ss')}</td>
                    <td>${item.state}</td>
                    <th>
                    <a href="/iframe/article/publisher/publisher.html?id=${item.Id}" class="layui-btn layui-btn-xs">编辑</a>
                    <button myid="${item.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                        </th>
                </tr>`;
        $('tbody').append(theTr)
    });
    setPage()
}
getList()

// 2. 获取筛选分类 数据
async function getCates() {
    $("select[name=category]").append(`<option value="" lay-verify="cate">所有分类</option>`); // 默认选项- 默
    const res = await reqGetCates()
    // console.log(res)
    res.data.data.forEach(item => {
        $("select[name=category]").append(`<option value="${item.Id}" lay-verify="cate">${item.name}</option>`)
    })
    // 渲染动态创建表单元素 option
    // form.render(type, filter) 参数一是类型 select checkbox radio 参数2是表单lay-filter的值
    layui.form.render('select', 'category')
}
getCates()
// 3. 筛选数据
$('.search').on('submit', e => {
    e.preventDefault()
    // 3.1 获取到两个下拉框的值
    // console.log($('select[name=category]').val());
    // console.log($('select[name=state]').val());
    // 将选中的 分类id 和 状态赋值给queryInfo
    queryInfo.cate_id = $('select[name=category]').val()
    queryInfo.state = $('select[name=state]').val()
    // 重新获取数据
    getList()
})

function setPage() {
    layui.laypage.render({
        elem: 'page', // 盛放分页的容器  id不加#号
        count: total, // 总条数
        limit: queryInfo.pagesize, // 每页显示的条数
        limits: [2, 4, 6, 8], // 每页条数的选择项
        curr: queryInfo.pagenum,// 当前页码
        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
        // jump 函数上来回默认执行一次，点击切换会再次执行这个函数
        // obj 当前分页的所有信息
        // first 是一个布尔值 第一次执行结果是true 点击执行 first是undefined
        jump: function (obj, first) {
            console.log(obj, first)
            if (!first) {
                // 用户点击操作的 
                // obj中有两个属性需要更新 处理 curr  limit
                queryInfo.pagenum = obj.curr
                queryInfo.pagesize = obj.limit
                getList()
            }
        }
    })
}